<template>
  <g
    class="eagle"
    :transform="`translate(${EAGLE.x}, ${EAGLE.y})`"
  >
    <g v-if="recordStore.eagleAlive">
      <path
        fill="#636363"
        d="M0,1 h2 v1 h1 v1 h1 v2 h2 v1 h1 v-3 h-1 v-1 h3 v1 h1 v1 h-1 v2 h1 v-1 h2 v-2 h1 v-1 h1 v-1 h2 v1 h-1 v1 h1 v1 h-1 v1 h1 v1 h-2 v1 h1 v1 h-1 v2 h-1 v1 h-3 v-1 h-1 v2 h1 v1 h2 v2 h-2 v-1 h-1 v1 h-2 v-1 h-1 v1 h-2 v-2 h2 v-1 h1 v-2 h-1 v1 h-3 v-1 h-1 v-2 h-1 v-1 h1 v-1 h-2 v-1 h1 v-1 h-1 v-1 h1 v-1 h-1 v-1"
      />
      <Pixel
        v-for="([x, y], i) in points"
        :key="`${x}_${y}_${i}`"
        :x="x"
        :y="y"
        fill="#6b0800"
      />
    </g>
    <g v-else>
      <path
        fill="#9C4A00"
        d="M1,8 h1 v-2 h1 v-1 h1 v-2 h1 v-1 h1 v2 h-1 v1 h-1 v2 h-1 v2 h-1 v7 h-1 v-8"
      />
      <path
        fill="#636363"
        d="M7,3 h1 v1 h1 v1 h1 v1 h3 v1 h1 v2 h1 v2 h-1 v2 h-1 v-4 h-1 v2 h-1 v-1 h-2 v1 h-1 v2 h-1 v-1 h-2 v-1 h-2 v-1 h1 v-3 h1 v-2 h1 v-1 h1 v-1"
      />
    </g>
  </g>
</template>

<script setup>
  import Pixel from './Pixel.vue'
  import { EAGLE } from '@/utils/global'
  import { useRecordStore } from '@/store/gameRecord'

  const points = [[8, 3], [3, 6], [4, 7], [6, 8], [9, 8], [11, 7], [12, 6]]
  const recordStore = useRecordStore()
</script>

<style lang="scss" scoped>

</style>